<template>
    <div class="card_border2">
        <div class="card_header2">
            选择挑战模式
        </div>
        <div class="card_footer2">
            <infobutton btn_text="双人对战模式" path="/" msg="*每局15题，得分更高获胜"></infobutton>
            <infobutton btn_text="单人无限模式" path="/selfgame" msg="*每局3次机会，答错3题挑战结束"></infobutton>
        </div>
    </div>
</template>

<script>
import infobutton from '@/components/info_button'
export default {
    components:{
        infobutton
    }
}
</script>

<style scoped>
.card_border2{
    /* border: 1px solid pink; */
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    background-color: #fff;
}
.card_header2{
    height: 8vh;
    border-bottom: 0.5px solid #dddddd;
    color: black;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.card_footer2{
    flex: 1;
}
</style>
